<template>
  <div class="confirm-dialog-overlay" v-if="visible">
    <div class="confirm-dialog">
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
      <div class="buttons">
        <button class="btn-cancel" @click="handleCancel">取消</button>
        <button class="btn-confirm" @click="handleConfirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'; // 修复1：显式导入defineExpose

const props = defineProps({
  title: { type: String, default: '提示' },
  message: { type: String, required: true }
});

const emit = defineEmits(['confirm', 'cancel']);
const visible = ref(false);

// 修复2：确保方法定义正确且无拼写错误
function show() { 

  console.log("show方法")
  
  visible.value = true; 
}

function hide() { 
  visible.value = false; 
}

const handleConfirm = () => {
  emit('confirm');
  hide();
};

const handleCancel = () => {
  emit('cancel');
  hide();
};

// 修复3：明确暴露方法，确保没有拼写错误
defineExpose({ 
  show: show,  // 显式指定键值对，避免隐式转换问题
  hide: hide 
});
</script>

<style scoped>
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 320px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.confirm-dialog h3 {
  color: #0f4c81;
  margin-bottom: 16px;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.btn-cancel, .btn-confirm {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
}

.btn-confirm {
  background: #0f4c81;
  color: white;
  border: none;
}

.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 320px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.confirm-dialog h3 {
  color: #0f4c81;
  margin-bottom: 16px;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.btn-cancel, .btn-confirm {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
}

.btn-confirm {
  background: #0f4c81;
  color: white;
  border: none;
}
</style>